<template>
    <!-- 试卷管理 -->
    <div class="paper">
        <el-row :gutter="10" class="class">
            <!-- =============== 专业 ======================== -->
            <el-col :sm="7" :md="6" :lg="4" v-if=" role === 'admin'">
                <el-menu>
                    <el-menu-item
                        v-for="item in specialtys"
                        :index="item.name + ''"
                        :key="item.name"
                        @click="specialtMenuCilck(item.name)"
                    >
                        <i class="el-icon-s-home"></i>
                        <span>{{item.name}}</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-col
                :sm="role === 'admin' ? 24 : 24"
                :md="role === 'admin' ? 18 : 24"
                :lg="role === 'admin' ? 20 : 23"
            >
                <el-form :inline="true">
                    <el-form-item>
                        <el-input v-model="search" placeholder="试卷标题"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button
                            icon="el-icon-search"
                            type="warning"
                            plain
                            @click="searchHandle(search)"
                        >查询</el-button>

                        <el-button
                            icon="el-icon-circle-plus"
                            type="primary"
                            @click="$router.push({path: '/paper/add'})"
                        >新增试卷</el-button>

                        <el-button
                            type="danger"
                            :disabled="!checkBoxSelected"
                            @click="batchDel"
                            icon="el-icon-delete"
                        >批量删除</el-button>

                        <el-button type="success" @click="getPaperList(); isSearch = false;" plain>
                            {{ refreshing ? '加载中' : '刷新'}}
                            <i
                                :class=" refreshing ? 'el-icon-loading' : 'el-icon-refresh'"
                            ></i>
                        </el-button>
                    </el-form-item>
                </el-form>
                <!-- ================================================= 表格 ================================================= -->
                <el-table
                    :data="isSearch ? searchData : tableData"
                    row-key="id"
                    style="width: 100%"
                    border
                    v-loading="refreshing"
                    @selection-change="handleSelectionChange"
                >
                    <!-- 选择框  -->
                    <el-table-column type="selection" width="40"></el-table-column>

                    <el-table-column prop="title" label="试卷名" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="totalTime" label="考试时长（分钟）" align="center"></el-table-column>
                    <el-table-column label="考试有效时间" header-align="center">
                        <el-table-column prop="startDate" width="135" label="开始时间" align="center"></el-table-column>
                        <el-table-column prop="endDate" width="135" label="结束时间" align="center"></el-table-column>
                    </el-table-column>
                    <el-table-column prop="courseName" label="科目" align="center"></el-table-column>
                    <el-table-column label="状态" align="center">
                        <template slot-scope="scope">
                            <el-tag
                                :type="scope.row.status === 1 ? 'info' : 'success'"
                            >{{ scope.row.status === 1 ? '草稿' : '发布' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="解析是否可见" align="center">
                        <template slot-scope="scope">
                            <el-tag
                                :type="scope.row.analysisVisible === 1 ? 'success' : 'warning'"
                            >{{scope.row.analysisVisible === 1 ? '是': '否'}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="teacherName" label="教师" align="center"></el-table-column>
                    <el-table-column v-if="isSearch" prop="specialty" label="专业" align="center"></el-table-column>
                    <el-table-column label="组卷方式" align="center">
                        <template slot-scope="scope">
                            <el-tag
                                :type="scope.row.way == 1 ? 'info' : 'success'"
                            >{{ scope.row.way == 1 ? '固定' : '随机' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="145" align="center">
                        <template slot-scope="scope">
                            <el-button
                                title="编辑"
                                type="primary"
                                plain
                                @click="editorStudentSelect(scope.$index, scope.row)"
                            >
                                <i class="el-icon-edit"></i>
                            </el-button>
                            <el-button
                                title="删除"
                                type="danger"
                                plain
                                @click="singleDelStudent(scope.$index, scope.row)"
                            >
                                <i class="el-icon-delete"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="sizeChangeHandle"
                    @current-change="currentChangeHandle"
                    :current-page="pageIndex"
                    :page-sizes="[10, 15,20, 40, 50, 70, 100]"
                    :page-size="pageSize"
                    :total="totalPage"
                    layout="total, sizes, prev, pager, next, jumper"
                ></el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            specialtys: [],
            courseList: [],
            addPaperForm: {
                title: "",
                courseId: "",
                teacherId: sessionStorage.userId,
                content: "",
                startDate: null,
                endDate: null,
                totalTime: ""
            },
            isSearch: false,
            searchData: [],
            dialogAddPaperVisible: false,
            totalPage: 0,
            pageIndex: 1,
            pageSize: 10,
            loading: false,
            refreshing: false,
            role: sessionStorage.role,
            activeMenuSpecialty: "",
            search: "",
            checkBoxSelected: false
        };
    },
    created() {
        if (this.role === "admin") {
            this.$http("/api/specialty/list").then(({ data }) => {
                this.specialtys = data.data;
                // this.activeMenuSpecialty = data.data[0].name;
                this.activeMenuSpecialty = "计算机应用技术";
                this.getPaperList();
            });
        } else {
            this.getPaperList();
        }
        // this.getCourseList();
    },
    methods: {
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val;
            this.pageIndex = 1;
            this.getPaperList();
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val;
            this.getPaperList();
        },
        filterdifficult(value, row) {
            return row.difficult === value;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            if (val.length < 1) {
                this.checkBoxSelected = false;
            } else {
                this.checkBoxSelected = true;
            }
        },
        // 专业menu click
        specialtMenuCilck(val) {
            if (this.activeMenuSpecialty !== val) {
                this.activeMenuSpecialty = val;
                this.getPaperList();
            }
        },
        // 得到课程列表
        getCourseList() {
            this.$http("/api/getcourselist", {
                params: {
                    userId: sessionStorage.userId,
                    role: sessionStorage.role
                }
            }).then(res => {
                console.log("res", res);
                this.courseList = res.data;
            });
        },
        // 得到试卷列表
        getPaperList() {
            if (this.refreshing) return;
            this.refreshing = true;
            this.$http("/api/paper/list", {
                params: {
                    teacherId: sessionStorage.userId,
                    page: this.pageIndex,
                    limit: this.pageSize,
                    specialty: this.activeMenuSpecialty
                }
            })
                .then(({ data }) => {
                    console.log("data", data);
                    if (data.code === 0) {
                        this.tableData = data.page.list;
                        this.totalPage = data.page.totalCount;
                    } else {
                        this.tableData = [];
                        this.totalPage = 0;
                    }
                    this.refreshing = false;
                    console.log("this.tableData", this.tableData);
                })
                .catch(() => {
                    this.refreshing = false;
                });
        },
        // 新增试卷
        addPaper(title, courseId) {
            //  let { title, courseId, teacherId } = req.query
            console.log("this.addPaperForm", this.addPaperForm);
            this.$http("/api/paper/save", {
                params: this.addPaperForm
            }).then(res => {
                this.$message(res.data.msg);
                if (res.data.code === 0) {
                    this.dialogAddPaperVisible = false;
                }
            });
        },
        // 批量删除
        batchDel(val) {
            this.$message("抱歉该功能还在完善");
        },
        // 查询
        searchHandle (val) {
            this.$message("抱歉该功能还在完善");
        }

    }
};
</script>

<style lang="scss">
.paper {
    // padding: 20px 5%;

    .dialog .el-dialog__body {
        .label {
            padding-top: 8px;
            padding-bottom: 3px;
        }
        .btn-group {
            padding: 10px;
            text-align: right;
        }
    }
    .el-menu {
        // 去掉右边的小竖线
        border-right: none;
    }
    // 选中的专业
    .el-menu-item.is-active {
        background: #ecf5ff;
    }
}
</style>